<template>
  <template v-for="item in menu">
    <!--没有子菜单，即父级菜单-->
    <el-menu-item v-if="validatenull(item[childrenKey]) && validRoles(item) && !item.hidden"
                  :index="item[pathKey]"
                  :key="item[labelKey]"
                  style="margin: 0px"
                  :class="{ 'is-active': validActive(item)}"
                  @click="open(item)">
      <!-- 这里的i标签要替换成el-icon -->
      <i :class="item[iconKey]"></i>
      <template v-slot:title>
        <span v-bind:alt="item[pathKey]">{{ getTitle(item) }}</span>
      </template>
    </el-menu-item>
    <!-- 存在子菜单 -->
    <el-sub-menu v-else-if="!validatenull(item[childrenKey]) && validRoles(item)"
                 :index="getPath(item)"
                 :key="item[labelKey]">
      <template v-slot:title>
        <!-- 这里的i标签要替换成el-icon -->
        <i :class="item[iconKey]"></i>
        <span>{{ getTitle(item) }}</span>
      </template>
      <!--显示子菜单-->
      <template v-for="(child, index) in item[childrenKey]" :key="child[labelKey]">
        <el-menu-item :index="getPath(child)"
                      @click="open(child)"
                      style="margin: 0px"
                      v-if="validatenull(child[childrenKey])">
          <!-- 这里的i标签要替换成el-icon -->
          <i :class="child[iconKey]"></i>
          <template v-slot:title>
            <span>{{ getTitle(child) }}</span>
          </template>
        </el-menu-item>
        <sidebarItem v-else :menu="[child]"
                     :screen="screen"
                     :props="props"
                     :collapse="collapse"
                     :key="index"></sidebarItem>
      </template>
    </el-sub-menu>
  </template>
</template>

<script setup>
import {validatenull} from '/src/utils/validate'
import website from '/src/config/website.js'
import {mapState} from "pinia";
import {useUserStore} from "../../../store/modules/user.js";
import {useCommonStore} from "../../../store/modules/common.js";
import {useRoute, useRouter} from "vue-router"

defineOptions({
  name: "sidebarItem",
})


const optionData = reactive({
  config: website.menu
})
const {config} = toRefs(optionData)

const props = defineProps({
  menu: {
    type: Array
  },
  screen: {
    type: Number
  },
  first: {
    type: Boolean,
    default: false
  },
  props: {
    type: Object,
    default: () => {
      return {};
    }
  },
  collapse: {
    type: Boolean
  }
})

const router = useRouter()
const route = useRoute()

const roles = computed(() => {
  const userStore = useUserStore();
  return userStore.roles
})
const labelKey = computed(() => {
  return props.props.label || optionData.config.label
})
const pathKey = computed(() => {
  return props.props.label || optionData.config.path
})
const queryKey = computed(() => {
  return props.props.label || optionData.config.query
})
const iconKey = computed(() => {
  return props.props.label || optionData.config.icon
})
const childrenKey = computed(() => {
  return props.props.label || optionData.config.children
})


function getPath(item) {
  return item[pathKey.value]
}

function getTitle(item) {
  return router.$avueRouter.generateTitle(item, props.props);
}

function validActive(item) {
  console.log("item", item)
  const groupFlag = (item["group"] || []).some((ele) => route.path.includes(ele));
  return this.nowTagValue === item[pathKey.value] || groupFlag;
}

function validRoles(item) {
  item.meta = item.meta || {};
  return item.meta.roles ? item.meta.roles.includes(roles.value) : true;
}

function open(item) {
  const t1=window.performance.now()
  console.log("openMenu", item, t1)

  if (props.screen <= 1) {
    const commonStore = useCommonStore();
    // todo 这里的缩进好像效果不对
    commonStore.SET_COLLAPSE()
  }
  router.$avueRouter.group = item.group;
  router.$avueRouter.meta = item.meta;
  console.log("router", item)
  console.log("router", item.query)
  console.log("router", router)
  console.log("router", labelKey)
  console.log("router", pathKey)
  console.log("router", item[labelKey.value])
  console.log("router", item[pathKey.value])
  console.log("router", item[pathKey.value])
  console.log("router",
      router.$avueRouter.getPath({
        name: item[labelKey.value],
        src: item[pathKey.value],
        i18n: (item.meta || {}).i18n,
      }))
  router.push({
    path: router.$avueRouter.getPath({
      name: item[labelKey.value],
      src: item[pathKey.value],
      i18n: (item.meta || {}).i18n,
    }),
    query: item.query || {},
  });
  const t2=window.performance.now()
  console.log("openMenu", item, t2)
  console.log("openMenu", t2-t1);//6.199999999254942
}
</script>
